<template>
  <div class="item-one" ref="itemOne">
    <div class="title">
      <span>分润统计</span>
      <div>
        <el-button type="primary" :disabled="exxxx" @click="merchantexcel"><i class="el-icon-download"></i>导出</el-button>
        <el-button icon="el-icon-refresh"></el-button>
      </div>
    </div>
    <!-- <div class="receiptinfo">
        <div class="receiptinfobox">
            <div><span class="tit">收款账号:</span><span>{{cardnum}}</span></div>
            <div><span class="tit">收款人姓名:</span><span>{{cardname}}</span></div>
            <el-button class="but" icon="el-icon-edit" v-show="cardnum !== '' && cardname !== ''"></el-button>
        </div>
    </div> -->
    <div class="container">
      <div class="screeningBox">
        <div class="leftBox">
          <div class="leftitem">
            <div class="block">
              <el-date-picker
                v-model="ctime"
                :clearable='false'
                type="daterange"
                align="center"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
                :picker-options="pickerOptions">
              </el-date-picker>
            </div>
          </div>
        </div>
        <div class="rightBox">
          <div class="rightitem">
            <el-button icon="el-icon-search" type="primary" @click="soso" :disabled="isDisable">搜索</el-button>
            <!-- <el-button icon="el-icon-refresh" type="primary" @click="reset">重置</el-button> -->
          </div>
        </div>
      </div>
      <div class="stitle">
        <span>合计:</span>
      </div>
      <div class="statistical">
        <div class="statisticalitem">
          <div>获得返佣</div>
          <div>
            <span class="red">{{porfit}}</span>元
          </div>
        </div>
        <div class="statisticalitem">
          <div>需支付佣金</div>
          <div>
            <span class="red">{{commission}}</span>元
          </div>
        </div>
        
      </div>
      <div class="title" style="margin-top:20px">支付佣金明细:</div>
      <div class="tableBox">
        <el-table
          v-loading="loading"
          ref="multipleTable"
          :data="merchantarr"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          stripe
          :header-cell-style="tableHeaderColor"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column align="center" type="index" label="序号"></el-table-column>
          <el-table-column align="center" prop="lowerName" label="下级名称"></el-table-column>
          <el-table-column align="center" prop="commission" label="分润"></el-table-column>
          <el-table-column align="center" width="100" v-if="rolesId == 2">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="jupminfo(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            @size-change="sizechange"
            :page-sizes="[10,20,30,40,50]"
            :page-size="cur_size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total1"
          ></el-pagination>
        </div>
      </div>
      <br>
      <br>
      <el-dialog title="分润详情" :visible.sync="dialogTableVisible"  width="35%" :close-on-click-modal='false'>
        <el-table :data="gridData">
          <el-table-column align="center" type="index" label="序号"></el-table-column>
          <el-table-column align="center" property="bdName" label="业态名称"></el-table-column>
          <el-table-column align="center" property="profit" label="分润（元）"></el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            background
            @current-change="handleCurrentChange1"
            @size-change="sizechange1"
            :page-sizes="[5,10]"
            :page-size="cur_size1"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total2"
          ></el-pagination>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getservice, getProfits, getServiceData, getProfitsexcel, getProfitsBdDetail } from "@/api/api";
export default {
  name: "item-one",
  data: function() {
    return {
      loading: false,
      isDisable: false,
      cur_page: 1,
      cur_size: 10,
      fid: '',
      cardnum:'',//收款账号
      cardname:'',//收款姓名
      multipleSelection: [],
      visible: false,
      merchantarr: [],
      exxxx: false,
      total1: 0,
      pageCount: "",
      ctime:'',
      conditions: {
        stardate: "",
        enddate: ""
      },
      rolesId:'',
      porfit:'',//获得分润
      commission:'',//支付佣金
      dialogTableVisible: false,
      gridData: [],
      agent2Fid:'',
      cur_page1: 1,
      cur_size1: 10,
      total2: 0,
      pickerOptions: {
        shortcuts: [
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', [date,date]);
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, 
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          },
          // {
          //   text: '最近三个月',
          //   onClick(picker) {
          //     const end = new Date();
          //     const start = new Date();
          //     start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
          //     picker.$emit('pick', [start, end]);
          //   }
          // }
        ]
      },
    };
  },
  created() {
    this.$store.dispatch("getNewNum", 6);
    this.getPermissions()
    const start = new Date();
    start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
    const year=start.getFullYear();
    const month=start.getMonth()+1;
    const date=start.getDate();
    if(month < 10){
      const date1 = year+'-'+ 0 +month+ '-'+date +' 00:00:00'
      const date2 = year+'-'+ 0 +month+ '-'+date +' 23:59:59'
      this.ctime =  [date1,date2]
    }else{
      const date1 = year+'-'+month+ '-'+date +' 00:00:00'
      const date2 = year+'-'+month+ '-'+date +' 23:59:59'
      this.ctime =  [date1,date2]
    }
    this.getProfits()
    // this.getServiceData()
  },
  methods: {
     //修改thead 背景色
     tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;'
      }
    },
    // 刷新
    refresh() {
      this.$router.replace({
        path: "/refresh",
        query: {
          t: Date.now()
        }
      });
    },
    // 分页导航
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getProfits();
      this.$nextTick(() => {
        document.querySelectorAll(".content")[0].scrollTop = "0";
      });
    },
    // 分页数量
    sizechange(val) {
      this.cur_size = val;
      this.getProfits();

      this.$nextTick(() => {
        document.querySelectorAll(".content")[0].scrollTop = "0";
      });
    },
    // 详情弹框分页导航
    handleCurrentChange1(val) {
      this.cur_page1 = val;
      this.getProfitsBdDetail();
    },
    // 详情弹框分页数量
    sizechange1(val) {
      this.cur_size1 = val;
      this.getProfitsBdDetail();
    },
    //多选框
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    //  重置
    reset() {
      // this.ctime = ''
    },
    //获取权限
    getPermissions(){
      var aaa = sessionStorage.getItem('userInfo')
      var bbb = JSON.parse(aaa)
      this.fid = bbb.fid
      this.rolesId = bbb.rolesId
      console.log(bbb)
    },
    //获取收款账号信息
    // getServiceData(){
    //   console.log(this.fid)
    //   getServiceData({},this.fid).then(res => {
    //     console.log(res)
    //     if (res.code == 405) {
    //       sessionStorage. removeItem("token");
    //       this.$router.push("/login");
    //     } else {
    //       this.cardnum = res.data.cardnum
    //       this.cardname = res.data.cardname
    //     }
    //   })
    // },
    // 搜索
    soso() {
      if (this.conditions.servicelevel == 1) {
        this.getProfits("agent1Id");
      } else if (this.conditions.servicelevel == 2) {
        this.getProfits("agen2Id");
      } else {
        this.getProfits("agent1Id");
      }
    },

    // 商户列表
    getProfits(level) {
      this.loading = true
      this.isDisable = true
      getProfits({
        page: this.cur_page,
        size: this.cur_size,
        startDate: this.ctime[0],
        endDate: this.ctime[1],
      }).then(res => {
        if (res.code == 405) {
          sessionStorage. removeItem("token");
          this.$router.push("/login");
        } else if(res.code == 200){
          this.isDisable = false
          this.loading = false
          this.merchantarr = res.data.commissionDetails.list;
          this.total1 = res.data.commissionDetails.pageInfo.recordCount;
          this.porfit = res.data.porfit
          this.commission = res.data.commission
        }else if(res.code == 500){
          this.isDisable = false
          this.loading = false
          this.$message.error(res.message);
          this.merchantarr = []
        }
      });
    },
    //详情
    jupminfo(v){
      this.dialogTableVisible = true
      this.agent2Fid = v.fid
      this.getProfitsBdDetail()
    },
    getProfitsBdDetail(){
      getProfitsBdDetail({
        page: this.cur_page1,
        size: this.cur_size1,
        agent2Id: this.agent2Fid,
        startDate: this.ctime[0],
        endDate: this.ctime[1]
      }).then(res => {
        if (res.code == 405) {
          sessionStorage. removeItem("token");
          this.$router.push("/login");
        } else if(res.code == 200){
          this.gridData = res.data.list
          this.total2 = res.data.pageInfo.recordCount;
        }else if(res.code == 500){
          this.$message.error(res.message);
        }
      })
    },
    //导出
    merchantexcel(){
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      this.exxxx = true;
      getProfitsexcel({
        page: this.cur_page,
        size: this.cur_size,
        startDate: this.ctime[0],
        endDate: this.ctime[1],
      }).then(res => {
          if(res.code == 405){
            sessionStorage. removeItem('token')
            this.$router.push('/login');
             loading.close();
             this.exxxx = false;
          }else if(res.code == 200){
        let elink = document.createElement('a');
        elink.href = res.data;
        elink.click();
        loading.close();
        this.exxxx = false;
        }else{
           this.$message.error(res.message);
          loading.close();
          this.exxxx = false;
        }
      })
    }
  }
};
</script>
<style scoped lang='less'>
.title {
  background: #fff;
  padding: 10px 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.screeningBox {
  width: 100%;
  display: flex;
}
.leftBox,
.rightBox {
  width: 50%;
  padding: 0 15px;
  box-sizing: border-box;
}
.leftBox > .leftitem {
  margin-bottom: 15px;
}
.rightBox > .rightitem {
  margin-bottom: 15px;
}
.tableBox {
  margin-top: 20px;
}
.red {
  color: #f9607d;
}
.blue {
  color: #01aaef;
}
.stitle {
  padding: 5px 0;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  i {
    margin-left: 10px;
    margin-right: 5px;
  }
  .swarning {
    color: red;
  }
  .warning {
    color: #f9607d;
  }
}
.statistical {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #374459;
  color: #fff;
  padding: 12px;
  box-sizing: border-box;
  .statisticalitem {
    flex: 1;
    text-align: center;
    border-right: 1px solid rgba(255, 255, 255, 0.445);
    font-size: 13px;
    line-height: 180%;
    &:nth-last-child(1) {
      border-right: none;
    }
    .red {
      color: #f9607d;
      font-size: 18px;
    }
    .blue {
      color: #01aaef;
      font-size: 18px;
    }
  }
}
.receiptinfo{
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 20px;
    .receiptinfobox{
        width: 95%;
        padding: 15px;
        position: relative;
        box-sizing: border-box;
        background: #FFFDE7;
        border: 1px solid #F1EDBF;
        line-height: 180%;
        font-size: 14px;
        color: #101010;
        .tit{
            color: #999999;
            width: 10%;
            display: inline-block;
        }
        .but{
          position:absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%)
        }
    }
}
</style>